<template>
<div v-if="disPlayFlag">
    <div class="">
        <div slot="header" class="clearfix job-tab-header">
            <span>岗位配置:超级管理员</span>
        </div>
        <div>
            <el-row :gutter="10">
                <el-col :span="11" class="">
                    <tab-pane-job-left ref="leftJob" @checked-change="onSourceCheckedChange"></tab-pane-job-left>
                </el-col>
                <el-col :span="2" style="text-align: center;vertical-align: middle;" class="">
                    <div class="el-transfer__buttons">
                        <el-button size="small" type="primary" :class="['el-transfer__button']" @click.native="addToLeft" :disabled="rightChecked.length === 0">
                            <i class="el-icon-arrow-left"></i>
                            <span v-if="buttonTexts[0] !== undefined">{{ buttonTexts[0] }}</span>
                        </el-button>
                        <el-button size="small" type="primary" :class="['el-transfer__button']" @click.native="addToRight" :disabled="leftChecked.length === 0">
                            <span v-if="buttonTexts[1] !== undefined">{{ buttonTexts[1] }}</span>
                            <i class="el-icon-arrow-right"></i>
                        </el-button>
                    </div>
                </el-col>
                <el-col :span="11" class="area">
                    <tab-pane-job-right ref="rightJob" @checked-change="onTargetCheckedChange"></tab-pane-job-right>
                </el-col>
            </el-row>
            <el-row :gutter="5">
                <el-col style="text-align: center;">
                    <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</template>

<script>
import {
  batchInsertItem,
  batchDeleteItem
} from '@/api/systemManage/roleManagementJobEdit'

import tabPaneJobLeft from './tabPaneJobLeft'
import tabPaneJobRight from './tabPaneJobRight'

export default {
  name: 'userManagementJobEdit',
  components: {
    tabPaneJobLeft,
    tabPaneJobRight
  },
  props: {
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    roleName: {
      type: String,
      default: ''
    },
    roleid: {
      type: String,
      default: ''
    },
    subsysid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      targetForm: {
        title: ''
      },
      activeName: 'containJob',
      tabPaneNameArray: [],
      buttonTexts: [],
      leftChecked: [],
      rightChecked: []
    }
  },
  methods: {
    showCreatedTimes() {
      console.log('showCreatedTimes')
    },
    handleClick(tab, event) {
      console.log(tab.name)
    },
    closeSelf(tab, event) {
      this.$emit('closeMe')
    },
    saveData(tab, event) {
      this.$emit('closeMe')
    },
    onSourceCheckedChange(val) {
      console.log('onSourceCheckedChange')
      this.leftChecked = val
    },
    onTargetCheckedChange(val) {
      console.log('onTargetCheckedChange')
      this.rightChecked = val
    },
    addToLeft() {
      const deleteArr = []
      for (const temp of this.rightChecked) {
        deleteArr.push({
          'groupId': temp,
          'roleId': this.roleid
        })
      }
      batchDeleteItem(deleteArr).then(response => {
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.$refs.leftJob.$emit('refresh-table')
        this.$refs.rightJob.$emit('refresh-table')
      })
    },
    addToRight() {
      console.log(this.roleid)
      const insertArr = []
      for (const temp of this.leftChecked) {
        if (!this.rightChecked.includes(temp)) {
          insertArr.push({
            'groupId': temp,
            'roleId': this.roleid
          })
        }
      }
      batchInsertItem(insertArr).then(response => {
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        })
        this.$refs.leftJob.$emit('refresh-table')
        this.$refs.rightJob.$emit('refresh-table')
      })
    }
  },
  computed: {
    hasButtonTexts() {
      return this.buttonTexts.length === 2
    }
  }
}
</script>

<style scoped>
.area {
    height: 66vh;
    overflow-y: auto;
}

.el-transfer__buttons {
    padding-top: 30vh;
    padding-bottom: 20vh;
    padding-left: 0px;
    padding-right: 0px;
}

/* .el-transfer__button {
    width: 65px;
} */
</style>
